<html><head><meta charset="utf-8"><title>09 Webpack 中使用 TypeScript 开发项目-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 2-3 09 Webpack 中使用 TypeScript 开发项目
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                09 Webpack 中使用 TypeScript 开发项目
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-24 09:25:45
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img4.mukewang.com/5cd9634e0001c59e06400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">上天赋予的生命，就是要为人类的繁荣和平和幸福而奉献。<p class="author">——松下幸之助</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><a href="https://www.typescriptlang.org/">TypeScript</a> 是微软公司提出来的一个 JavaScript 的超集语言，主要作用是为 JavaScript 增加静态类型检测系统和 ECMAScript 语法的扩展。TypeScript 代码可以编译为普通 JavaScript 代码在浏览器或者 Node.js 环境执行。本小节主要讨论在 Webpack 中集成 TypeScript 开发环境，不再做 TypeScript 的优劣比较和语法讲解，<strong>日常项目不涉及到 TypeScript 开发，则可以直接跳过本小节内容</strong>。</p>
</div><div class="cl-preview-section"><h2 id="typescript-编译器和-tsconfig.json" style="font-size: 30px;">TypeScript 编译器和 <code>tsconfig.json</code></h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">TypeScript 代码不能直接在浏览器执行，所以需要编译器将 TypeScript 文件转换成可以在浏览器执行的 JavaScript。NPM 安装编译器方法：</p>
</div><div class="cl-preview-section"><pre class="  language-bash"><code class="prism  language-bash"><span class="token function">npm</span> i -g typescript
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候我们新建一个 ts 文件（TypeScript 文件扩展名是<code>ts</code>）：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// hello.ts</span>
<span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span>name<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">'Hello, '</span> <span class="token operator">+</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> webpack <span class="token operator">=</span> <span class="token string">'Webpack'</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sayHello</span><span class="token punctuation">(</span>webpack<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后使用 <code>tsc hello.tc</code>，执行编译后<code>hello.ts</code>被编译成了<code>hello.js</code>：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">'Hello, '</span> <span class="token operator">+</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> webpack <span class="token operator">=</span> <span class="token string">'Webpack'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sayHello</span><span class="token punctuation">(</span>webpack<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">为了方便编译器和编辑器识别 TypeScript 项目，TypeScript 约定了<code>tsconfig.json</code>文件来存储项目配置，如果运行 <code>tsc</code> 时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"compilerOptions"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"outFile"</span><span class="token punctuation">:</span> <span class="token string">"dist/main.js"</span><span class="token punctuation">,</span>
        <span class="token string">"sourceMap"</span><span class="token punctuation">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">"files"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"src/index.ts"</span><span class="token punctuation">,</span> <span class="token string">"src/source.ts"</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">关于<code>tsconfig.json</code>更多配置，可以继续浏览<a href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html">官方文档</a>。</p>
</div><div class="cl-preview-section"><h2 id="webpack-集成-typescript" style="font-size: 30px;">Webpack 集成 TypeScript</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果要让 Webpack 来识别<code>ts</code>文件，需要配合 TypeScript 的 loader，使用<code>ts-loader</code>可以方便地构建浏览器可以运行的 JS 代码。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">安装<code>ts-loader</code>的命令为：<code>npm i ts-loader --save-dev</code>，</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后配置项目目录中的 webpack.config.js:</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    entry<span class="token punctuation">:</span> <span class="token string">'./src/app.ts'</span><span class="token punctuation">,</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        filename<span class="token punctuation">:</span> <span class="token string">'app.js'</span><span class="token punctuation">,</span>
        path<span class="token punctuation">:</span> <span class="token string">'./dist'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        extensions<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token string">'.webpack.js'</span><span class="token punctuation">,</span> <span class="token string">'.web.js'</span><span class="token punctuation">,</span> <span class="token string">'.ts'</span><span class="token punctuation">,</span> <span class="token string">'.js'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        loaders<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>test<span class="token punctuation">:</span> <span class="token regex">/\.ts$/</span><span class="token punctuation">,</span> loader<span class="token punctuation">:</span> <span class="token string">'ts-loader'</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">为了方便配置 TypeScript 项目，还可以在 Webpack 的项目根目录创建一个<code>tsconfig.json</code>文件。</p>
</div><div class="cl-preview-section"><div class="summary"><h5 class="centertitle" style="font-size: 20px; line-height: 38px;">小结 </h5></div><!--title:&#23567;&#32467; -->
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节主要介绍 TypeScript 的简单概念和<code>tsconfig.json</code>，最后通过配置<code>webpack.config.js</code>来让 webpack 集成 TypeScript 编译功能。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">专栏代码已经整理好给大家共享出来：<br>
<a href="https://github.com/ksky521/webpack-tutorial">https://github.com/ksky521/webpack-tutorial</a></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/266">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    08 在 Webpack 中使用 Babel 转换 JavaScript 代码
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/268">
                                                    <div class="next r clearfix">
                                <p>
                                    10 Webpack 中样式相关的配置
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>